<template>
  <div class="vue2-element-admin-login">
    <div class="login-logo">
      <img src="~@/assets/images/element-ui-logo.svg" alt="" class="logo-image">
      <h1>Admin</h1>
    </div>
    <el-form :model="loginForm">
      <el-form-item>
        <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="admin" />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="loginForm.password"
          show-password
          prefix-icon="el-icon-lock"
          placeholder="11"
        />
      </el-form-item>
      <el-form-item>
        <button type="button" class="el-button el-button--primary login-button" @click="onLogin">登录</button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async onLogin() {
      const { username, password } = this.loginForm
      if (username.trim() === '' || password.trim() === '') {
        return this.$message.warning('用户名或密码不能为空！')
      }
      const res = await this.$store.dispatch('user/login', this.loginForm)
      if (res) {
        const toPath = decodeURIComponent((this.$route.query.redirect || '/'))
        if (this.$route.name === 'login') {
          this.$router.replace('/')
        } else {
          this.$router.replace(toPath)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .vue2-element-admin-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-top: 240px;
    background: url('~@/assets/images/login-bg.svg');
    background-size: 100% 100%;
    .login-logo {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
    }
    .logo-image {
      height: 48px;
    }
    .login-button {
      width: 232px;
    }
  }
</style>
